<template>
  <app-page :cusStyle="{ padding: '15px' }">
    <view class="head-box" :style="{ background: defThemeColor.fill }">
      <view class="img-box" @click="editAvatarClick">
        <mxp-image
          width="60px"
          height="60px"
          borderRadius="40px"
          :src="userInfo?.avatar || '/static/images/logo1.svg'"
          errorSrc="/static/images/logo1.svg"
        ></mxp-image>
      </view>
      <view class="info-box">
        <text :style="{ color: defThemeColor.text }">{{ userInfo?.nickname || '袋鼠短剧用户' }}</text>
        <text class="uid" :style="{ color: defThemeColor.text3 }">UID：{{ userInfo ? `DS${userInfo.userId}` : '未知' }}</text>
      </view>
    </view>
    <mxp-list
      :cusStyle="{ background: defThemeColor.fill, padding: '0 10px', borderRadius: '10px', overflow: 'hidden', marginTop: '15px' }"
      :listBorderColor="false"
    >
      <mxp-list-item :arrow="true" :borderColor="!isMp" :hover="true" @click="openPersonalCenter">
        <mxp-list-item-info icon="/static/images/tab-bar/ico_list101.svg" title="个人资料"></mxp-list-item-info>
      </mxp-list-item>
      <mxp-list-item v-if="!isMp" :borderColor="false" :arrow="true" :hover="true" @click="openChangePassword">
        <mxp-list-item-info icon="/static/images/tab-bar/ico_list102.svg" title="修改密码"></mxp-list-item-info>
      </mxp-list-item>
    </mxp-list>
    <mxp-list
      :cusStyle="{ background: defThemeColor.fill, padding: '0 10px', borderRadius: '10px', overflow: 'hidden', marginTop: '15px' }"
      :listBorderColor="false"
    >
      <mxp-list-item v-if="!isMp" :arrow="true" :borderColor="!isMp" :hover="true" @click="openChangePhone">
        <mxp-list-item-info icon="/static/images/tab-bar/ico_list103.svg" title="修改手机号"></mxp-list-item-info>
      </mxp-list-item>
      <mxp-list-item :borderColor="false">
        <mxp-list-item-info icon="/static/images/tab-bar/ico_list103.svg" title="自动解锁剧集">
          <mxp-switch v-model="isAutoPay" :activeValue="1" :inactiveValue="0" :beforeChange="switchBeforeChange"></mxp-switch>
        </mxp-list-item-info>
      </mxp-list-item>
    </mxp-list>
    <view style="display: flex; flex: 1; align-items: stretch; justify-content: center; margin-top: 70px">
      <mxp-button
        text="退出登录"
        :plain="true"
        :loading="logOutLoging"
        :disabled="logOutLoging"
        :cusStyle="{ width: '690rpx' }"
        background="error"
        @click="logOut"
      ></mxp-button>
    </view>
    <mxp-clipper ref="mxpClipperRef"></mxp-clipper>
  </app-page>
</template>

<script setup lang="ts">
  import AppPage from '@/components/app-page/app-page.vue';
  import MxpClipper from '@/mxp-ui/mxp-clipper/mxp-clipper.vue';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import MxpList from '@/mxp-ui/mxp-list/mxp-list.vue';
  import MxpListItem from '@/mxp-ui/mxp-list-item/mxp-list-item.vue';
  import MxpListItemInfo from '@/mxp-ui/mxp-list-item-info/mxp-list-item-info.vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpSwitch from '@/mxp-ui/mxp-switch/mxp-switch.vue';
  import { computed, ref } from 'vue';
  import { useAppStore } from '@/pinia/app';
  import { myChooseImage } from '@/mxp-ui/mxp-tool/utils/base-api';
  import { uploadAxios } from '@/api/upload';
  import { updateUserInfoAxios } from '@/api/user';
  import useMxpToastRefHooks from '@/utils/hooks/useToast';
  import { amendAutoPayAxios, logoutAxios } from '@/api/account';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';

  const mxpClipperRef = ref<InstanceType<typeof MxpClipper> | null>(null);
  const appStore = useAppStore();
  const userInfo = computed(() => appStore.userInfo);
  /** 是否自动解锁下一集 */
  const isAutoPay = ref(userInfo.value?.isAutoPay === 1 ? 1 : 0);

  const isMp = ref(false);
  // #ifdef MP
  isMp.value = true;
  // #endif

  const mxpToastRef = useMxpToastRefHooks();
  const loging = ref(false);
  const logOutLoging = ref(false);

  /**
   * 上传头像
   */
  async function editAvatarClick() {
    const res = await myChooseImage({ count: 1 });
    mxpClipperRef.value?.show({
      imageUrl: Array.isArray(res.tempFilePaths) ? res.tempFilePaths[0] : res.tempFilePaths,
      async submit(res2) {
        if (!loging.value) {
          try {
            loging.value = true;
            const res1 = await uploadAxios({ path: res2.url });
            await updateUserInfoAxios({ avatar: res1.data.url! });
            appStore.setUserInfo({ ...userInfo.value!, avatar: res1.data.url! });
            loging.value = false;
          } catch (error) {
            console.log('修改头像失败====', error);
            loging.value = false;
            mxpToastRef.value?.showError('修改头像失败');
          }
        } else {
          mxpToastRef.value?.showError('头像正在提交中请稍后再试');
        }
      },
    });
  }

  /** 退出登录 */
  async function logOut() {
    try {
      await logoutAxios();
      appStore.setIsManualExit(true);
      appStore.logOut();
    } catch (error) {
      mxpToastRef.value?.showError('退出失败');
    }
  }

  /** 修改自动解锁 */
  async function switchBeforeChange() {
    try {
      const res = await amendAutoPayAxios();
      appStore.updateIsAutoPay(res.data);
      return Promise.resolve(res.data === 1);
    } catch (error) {
      return Promise.reject(true);
    }
  }

  /** 个人资料 */
  function openPersonalCenter() {
    uni.navigateTo({ url: '/pages/personal/personal-info/personal-info' });
  }
  // #ifndef MP
  /** 修改密码 */
  function openChangePassword() {
    uni.navigateTo({ url: '/pages/account/change-password/change-password' });
  }
  // #endif

  // #ifndef MP
  /** 修改登录手机号 */
  function openChangePhone() {
    uni.navigateTo({ url: '/pages/account/change-phone/change-phone' });
  }
  // #endif
</script>

<style lang="scss" scoped>
  .head-box {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    padding: 15px;
    border-radius: 10px;

    .img-box {
      margin-right: 15px;

      .img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
      }
    }

    .info-box {
      display: flex;
      flex: 1;
      flex-flow: column nowrap;
      align-items: flex-start;
      justify-content: space-around;

      .name {
        font-size: 14px;
        font-weight: bold;
      }

      .uid {
        margin-top: 8px;
        font-size: 14px;
      }
    }
  }
</style>
